<template>
  <div class="dataBrowsing">
    <el-row :gutter="10">
      <el-col :span="9">
        <el-card shadow="never">
          <open-map map-width="100%" map-height="100vh"/>
        </el-card>
      </el-col>
      <el-col :span="9">
        <el-card shadow="never">
          <div slot="header">
            <n-title title="调查对象信息"/>
          </div>
          <el-empty/>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="never">
          <div slot="header">
            <n-tab :options="[{label:'核查判定'},{label:'质检信息'},{label:'专家抽检'}]"/>
          </div>
          <el-empty/>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import {Component, Vue} from 'vue-property-decorator';
import DataTable from "@/components/DataTable/DataTable.vue";
import NTitle from "@/components/NTitle.vue";
import {getUserList} from "@/api/user";
import OpenMap from "@/components/OpenMap.vue";
import NTab from "@/components/NTab.vue";

@Component({
  methods: {getUserList},
  components: {NTab, OpenMap, NTitle, DataTable}
})
export default class dataBrowsing extends Vue {
  private status: any = '0';
  private cityValue: any = '';
  private cityList: any = [
    {
      value: '0471',
      label: '呼和浩特市'
    }
  ]
  columns: any = [
    {label: '名称', prop: 'userName', sortable: 'custom'},
    {label: '地址', prop: 'name', sortable: 'custom'},
    {
      label: '学校(机构)名称', prop: 'dept', formatter: function (row: any) {
        if (row && row.dept && row.dept.deptName) {
          return row.dept.deptName;
        } else {
          return '无';
        }
      }
    },
    {label: '学校(机构)详细地址', prop: 'email', sortable: 'custom', showOverflowTooltip: true},
    {label: '学校(机构)标识码', prop: 'phoneNumber', sortable: 'custom', showOverflowTooltip: true},
    {label: '学校(机构)办学类型(大类)', prop: 'phoneNumber2', sortable: 'custom', showOverflowTooltip: true},
    {label: '数据更新时间', prop: 'createTime', sortable: 'custom', showOverflowTooltip: true},
  ];

  // table 的参数
  options: any = {
    stripe: true, // 是否为斑马纹 table
    loading: false, // 是否添加表格loading加载动画
    highlightCurrentRow: true, // 是否支持当前行高亮显示
    multipleSelect: true, // 是否支持列表项选中功能
  };


  //按钮操作组
  operates: any = {
    title: '操作',
    width: 'auto',
    fixed: 'right',
    list: [
      {
        label: '查看',
        type: 'text',
        icon: 'el-icon-tickets',
        plain: true,
        disabled: (index: any, row: any) => {
          return row && row.id === 221;
        },
        method: (index: any, row: any) => {
          console.log(index, row)
        }
      },
      {
        label: '标错',
        type: 'text',
        icon: 'el-icon-document-delete',
        plain: true,
        style: {
          color: 'red'
        },
        disabled: (index: any, row: any) => {
          return row && row.id === 221;
        },
        method: (index: any, row: any) => {
          console.log(index, row)
        }
      },
      {
        label: '撤销标错',
        type: 'text',
        icon: 'iconfont icon-y-jingpinceshibaogaoshujudaochu',
        plain: true,
        disabled: (index: any, row: any) => {
          return row && row.id === 221;
        },
        method: (index: any, row: any) => {
          console.log(index, row)
        }
      }
    ]
  };
  selectFormModel: any = {
    userName: '',
    status: '',
    phoneNumber: '',
    sex: '',
  };

  private handleSelectionChange(val) {
    console.log(val);
  }
}
</script>
<style lang="scss" scoped>
</style>
